<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<title></title>
		<script type="text/javascript" src="script/config.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			body{
      	background-color:white;
      }
			.box {
				width: 100%;
				height: 100%;
			}

			.top {
				height: 50px;
				width: 100%;
				margin-top: 50px;
				text-align: center;
				font: 20px "微软雅黑";
				color: rgb(17, 64, 108);
			}

			.center {
				height: 400px;
				width: 100%;
				text-align: center;
				margin-top: 10px;
			}

			.cbox1 {
				height: 150px;
				width: 40%;
				margin-left: 30%;
				text-align: center;
			}
			.cbox2 {
				height: 300px;
				width: 60%;
				margin-left: 20%;
				text-align: center;
			}
			.ctitle {
				color: rgb(17, 64, 108);
				font-size: 18px;
				height: 50px;
			}

			.ctext {
				width: 100%;
				height: 50px;
				line-height: 32px;
				text-align: center;
				font-size: 18px;
				color: #f16c3c;
			}

			#pimg {
				width: 20px;
				height: 20px;
				float: left;
				margin-top: 5px;
				margin-left: 10px;
			}

			#yimg {
				width: 20px;
				height: 20px;
				float: left;
				margin-top: 5px;
				margin-left: 10px;
			}

			.cname {
				width: 80%;
				height: 30px;
				font-size: 18px;
				line-height: 30px;
				text-align: center;
			}

			.cname2 {
				width: 60px;
				height: 32px;
				line-height: 32px;
				text-align: center;
				font-size: 18px;
				color: #f16c3c;
				float: left;
			}

			.foot {
				width: 64%;
				margin-left: 18%;
				height: 44px;
				background-color: #f16c3c;
				line-height: 44px;
				text-align: center;
				color: white;
				font-size: 20px;
				border-radius: 10px;
				margin-top: 20px;
			}

			#cartype {
				width: 70%;
				height: 32px;
				line-height: 32px;
				font-size: 18px;
				/*color:grey;*/
				outline-style: none;
			    border-color:#f16c3c;
				display: inline-block;
				float: left;
				text-align: center;
			}

			#carlong,#carweight,#cartype {
				width:60%;
				height: 32px;
				line-height: 32px;
				font-size: 18px;
				border-bottom: 1px solid #f16c3c;
				outline-style: none;
				border-top: none;
				border-left: none;
				border-right: none;
				display: inline-block;
				float: left;
				text-align: center;
			}

			#pcar {
				width: 100%;
				height: 50px;
				line-height: 32px;
				text-align: center;
				font-size: 18px;
				color: #f16c3c;
			}

			#ycar {
				width: 100%;
				height: 50px;
				line-height: 32px;
				text-align: center;
				font-size: 18px;
				/*margin-top:15px;*/
				color: #000000;
			}
			select{
				border:none;
				list-style: none;
				outline-style: none;
				border: none;
				background: none;
			-webkit-appearance: none;
			font-size:18px;
			}
			select {
       padding: 0 0 0 30px;
      }
			.province{
				width:20%;
				height: 32px;
				line-height: 32px;
				font-size: 18px;
				border-bottom: 1px solid #f16c3c;
				outline-style: none;
				border-top: none;
				border-left: none;
				border-right: none;
				display: inline-block;
				float: left;
				text-align: center;
				 padding: 0 0 0 5px;
			}
			#plate_number{
				width:38%;
				height: 31px;
				line-height: 31px;
				font-size: 18px;
				border-bottom: 1px solid #f16c3c;
				outline-style: none;
				border-top: none;
				border-left: none;
				border-right: none;
				display: inline-block;
				float: left;
				text-align: left;
				padding: 0 0 0 5px;
			}
			input {
				-webkit-tap-highlight-color:transparent;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<div class="top">第1步:请选择您的车辆信息</div>
			<div class="center">
				<div class="cbox1">
					<div class="ctitle">类型</div>
					<div id="pcar"><img id="pimg" src="image/rgchose.png">
						<div class="cname">运输车辆</div>
					</div>
					<!-- <div id="ycar"><img id="yimg" src="image/rchose.png">
						<div class="cname">派送车辆</div>
					</div> -->
				</div>
				<div class="cbox2">
					<div class="ctitle">信息</div>
					<div class="ctext">
						<div class="cname2">车牌</div>
						<select class="province" id='province'>
							<!-- <option value="">省份</option> -->
							<option value="京">京</option>
							<option value="津">津</option>
							<option value="冀">冀</option>
							<option value="晋">晋</option>
							<option value="蒙">蒙</option>
							<option value="辽">辽</option>
							<option value="吉">吉</option>
							<option value="黑">黑</option>
							<option value="沪">沪</option>
							<option value="苏">苏</option>
							<option value="浙">浙</option>
							<option value="皖">皖</option>
							<option value="闽">闽</option>
							<option value="赣">赣</option>
							<option value="鲁">鲁</option>
							<option value="豫">豫</option>
							<option value="鄂">鄂</option>
							<option value="湘">湘</option>
							<option value="粤">粤</option>
							<option value="桂">桂</option>
							<option value="琼">琼</option>
							<option value="川">川</option>
							<option value="贵">贵</option>
							<option value="云">云</option>
							<option value="渝">渝</option>
							<option value="藏">藏</option>
							<option value="陕">陕</option>
							<option value="甘">甘</option>
							<option value="青">青</option>
							<option value="宁">宁</option>
							<option value="新">新</option>
							<option value="港">港</option>
							<option value="澳">澳</option>
							<option value="台">台</option>
						</select>
						<input type="text" id="plate_number"/></div>
					<div class="ctext">
						<div class="cname2">车长</div>
						           <select name="carlong" id="carlong" >
													<option value="" >请选择</option>
												</select>米</div>
					<div class="ctext">
						<div class="cname2">载重</div>
											 <!-- <select name="carweight" id="carweight" >
													<option value="" >请选择</option>
												</select>吨</div> -->
<input value="" type="number" name="carweight" id="carweight"/>吨</div>
					<div class="ctext">
						<div class="cname2">车型</div>
						<select name="province" id="cartype" >
							<option value="" >请选择</option>
						</select>
					</div>
				</div>
			</div>
			<div class="foot">下一步</div>
		</div>
	</body>
	<script type="text/javascript" src="script/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="script/local.js"></script>
	<script type="text/javascript" src="script/APICloud-rest.js"></script>
	<script type="text/javascript" src="script/api.js"></script>
	<!-- <script>
		$("#pcar").on("click", function() {
			$("#pimg").attr("src", "img/rgchose.png");
			$("#pcar").css("color", "#f16c3c");
			$("#yimg").attr("src", "img/rchose.png");
			$("#ycar").css("color", "#000000");
		});
		$("#ycar").on("click", function() {
			$("#yimg").attr("src", "img/rgchose.png");
			$("#ycar").css("color", "#f16c3c");
			$("#pimg").attr("src", "img/rchose.png");
			$("#pcar").css("color", "#000000");
		});

	</script> -->
	<script>
	apiready = function(){
		setTimeout("api.closeWin({name:'firstregister2'})",600);
		$api.val($api.dom('#plate_number'),'');
		$api.val($api.dom('#carlong'),'');
		$api.val($api.dom('#cartype'),'');
		$api.val($api.dom('#carweight'),'');
	var lorryid=api.pageParam.lorryid;
	$api.addEvt($api.dom('#pcar'), 'click',function(){
		$api.attr($api.dom('#pimg'),'src','image/rgchose.png');
		$api.css($api.dom('#pcar'),'color:#f16c3c');
		$api.attr($api.dom('#yimg'),'src','image/rchose.png');
		$api.css($api.dom('#ycar'),'color:#000000');
    $api.css($api.dom('.cbox2'),'display:block');
	});

	$api.addEvt($api.dom('#ycar'), 'click',function(){
		$api.attr($api.dom('#yimg'),'src','image/rgchose.png');
		$api.css($api.dom('#ycar'),'color:#f16c3c');
		$api.attr($api.dom('#pimg'),'src','image/rchose.png');
		$api.css($api.dom('#pcar'),'color:#000000');
		$api.css($api.dom('.cbox2'),'display:none');
	});

	// $api.get(url+'app.php/lorry_weight',function(ret){
	// 			if(ret.result==0){
	// 				for(var i=0;i<ret.vehiche_weight.length;i++){
	// 					 $api.append($api.dom('#carweight'),'<option value="'+ret.vehiche_weight[i].lorry_load_id+'" >'+ret.vehiche_weight[i].lorry_load+'</option>');
	// 				}
	// 			 }
	// 		 },'json');

			 $api.get(url+'app.php/lorry_long',function(ret){
						 if(ret.result==0){
							 for(var i=0;i<ret.vehiche_long.length;i++){
									 $api.append($api.dom('#carlong'),'<option value="'+ret.vehiche_long[i].lorry_length_id+'" >'+ret.vehiche_long[i].lorry_length+'</option>');
							 }
							}
						},'json');

			 $api.get(url+'app.php/lorry_type',function(ret){
						 if(ret.result==0){
							 for(var i=0;i<ret.lorry_type.length;i++){
                  $api.append($api.dom('#cartype'),'<option value="'+ret.lorry_type[i].lorry_type_id+'" >'+ret.lorry_type[i].lorry_type_name+'</option>');
							 }
							}
						},'json');

	$api.addEvt($api.dom('.foot'), 'click', function(){
		        if(lorryid==null){
							api.openWin({
								name: 'fiveregister1',
								url:  './fiveregister1.html',
							});
						}
						if($api.cssVal($api.dom('.cbox2'),'display')!='none'){
							var province=$api.val($api.dom('#province'));
							var plate_number=province+''+$api.val($api.dom('#plate_number'));
							var carlong=$api.val($api.dom('#carlong'));
							var cartype=$api.val($api.dom('#cartype'));
							var cweight=$api.val($api.dom('#carweight'));
							if(province.length==0){
								api.toast({
									 msg: '车牌省份不为空',
									 duration: 1000,
									location: 'middle'
								});
							}else if(!(/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/.test(plate_number))){
												api.toast({
													 msg: '车牌格式有误',
													 duration: 1000,
													location: 'middle'
												});
											}else if(carlong.length==0){
												api.toast({
													 msg: '车长不为空',
													 duration: 1000,
													location: 'middle'
												});
											}else if(cartype.length==0){
												api.toast({
													 msg: '车型不为空',
													 duration: 1000,
													location: 'middle'
												});
											}else if(cweight.length==0){
												api.toast({
													 msg: '载重不为空',
													 duration: 1000,
													location: 'middle'
												});
											}else{
                      	$api.post(url+'app.php/addlorry2',{
															body:{type:0,
															long:carlong,
															ctype:cartype,
															cweight:cweight,
															lorryid:lorryid,
															plate_number:plate_number,}
														 },function(ret){
															if(ret.result==0){

																api.toast({
																	 msg: '成功',
																	 duration: 1000,
																	location: 'middle'
																});
																// api.openFrame({
																//   url: './firstregister2.html?lorryid='+ret.lorryid,
																//  });
																 api.openWin({
																	 name: 'upgrade2',
																	 url:  './upgrade2.html',
																	 slidBackEnabled:false,
																	 pageParam: {
																	 lorryid: ret.lorryid,
																	 type:0
																	}
																 });
															 }else{
																 api.toast({
																		msg: ret.desc,
																		duration: 1000,
																	 location: 'middle'
																 });
															 }
														 });
													 }
						}else{
							api.openWin({
								name: 'main',
								url:  './main.html',
								slidBackEnabled:false,
							// 	pageParam: {
							// 	lorryid: api.pageParam.lorryid,
							// 	type:1
							//  }
							});
						}
					})
        }

	</script>
</html>
